<template>
	<view>
		<template v-if="isMember==='notgk'">
			<view class="shop-wrap">
				<view class="shop-head">
					<view class="head-img">
						<image v-if="isMember==='notgk'" class="crown" src="~@/static/img/crown.png"></image>
						<image :src="headUrl" class="tui-avatar"></image>
					</view>
					<view class="head-right">
						<view class="text">{{agencyId}}</view>
						<text class="tag"><text>{{position1}}</text></text>
						<view class="head-icons">
							 
							<image class="icon1" src="~@/packageC/static/img/h-bind.png" @tap="jumpTo('qrCode')"></image>
							<image @tap="scan('coupon')" class="scan-icon" src="~@/packageC/static/img/h-scan.png"></image>
						</view>
					</view>
				</view>
				
				<view class="shop-entrance">
					<view class="shop-entrance-inner">
						<view class="entrance-item" @tap="scan('cash')">
							<image src="~@/packageC/static/img/h-icon1.png"></image>
							<text>收银</text>
						</view>
						
						<view class="entrance-item" @tap="jumpTo('stock')">
							<image src="~@/packageC/static/img/h-icon2.png"></image>
							<text>库存管理</text>
						</view>
						<view  class="entrance-item" @tap="jumpTo('order')">
							<image src="~@/packageC/static/img/h-icon3.png"></image>
							<text>订单</text>
						</view>
						<view class="entrance-item" @tap="jumpTo('customer')">
							<image src="~@/packageC/static/img/h-icon4.png"></image>
							<text>顾客通知</text>
						</view>
						<!-- <view class="entrance-item">
							<image src="~@/packageC/static/img/h-icon5.png"></image>
							<text>皮肤测试</text>
						</view> -->
					</view>
				</view>
				<view class="shop-chart">
					<view class="chart-title">报表分析</view>
					<view class="chart-con">
						<view class="chart-item" @tap="jumpToChart(0)">
							<image class="chart-icon" src="~@/packageC/static/img/hc-icon1.png"></image>
							<view class="chart-text">
								<view class="text-title">销售统计报表</view>
								<view class="text-sub">销售统计报表数据分析</view>
							</view>
							<i class="iconfont iconxiangyou"></i>
						</view>
						<view class="chart-item" @tap="jumpToChart(1)">
							<image class="chart-icon" src="~@/packageC/static/img/hc-icon2.png"></image>
							<view class="chart-text">
								<view class="text-title">产品统计报表</view>
								<view class="text-sub">产品统计报表数据分析</view>
							</view>
							<i class="iconfont iconxiangyou"></i>
						</view>
						<view class="chart-item" @tap="jumpToChart(2)">
							<image class="chart-icon" src="~@/packageC/static/img/hc-icon3.png"></image>
							<view class="chart-text">
								<view class="text-title">订单统计报表</view>
								<view class="text-sub">订单统计报表数据分析</view>
							</view>
							<i class="iconfont iconxiangyou"></i>
						</view>
						<view class="chart-item" @tap="jumpToChart(3)">
							<image class="chart-icon" src="~@/packageC/static/img/hc-icon4.png"></image>
							<view class="chart-text">
								<view class="text-title">顾客分析报表</view>
								<view class="text-sub">顾客分析报表数据分析</view>
							</view>
							<i class="iconfont iconxiangyou"></i>
						</view>
						<view class="chart-item" @tap="jumpToChart(4)">
							<image class="chart-icon" src="~@/packageC/static/img/hc-icon5.png"></image>
							<view class="chart-text">
								<view class="text-title">店铺运营报表</view>
								<view class="text-sub">店铺运营报表数据分析</view>
							</view>
							<i class="iconfont iconxiangyou"></i>
						</view>
					</view>
				
				</view>
				<view class="shop-btn" @tap="jumpToHome">
					<view class="iconfont icondianpu1"></view>
				</view>
			</view>
			<!-- 扫码功能 -->
			<!-- 兼容微信小程序 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="scan-wrap" v-if="scanFlag">
				<camera-scan :scanTip="scanTip" @close="closeCashScan" @scanCode="cashScanCode"></camera-scan>
			</view>
			<!-- #endif -->

			<tui-modal :show="modalShow" @click="modalClick" @cancel="modalCancel" title="提示" :content="modalContent"></tui-modal>
			<!-- 扫码结果提示框 -->
			<tui-modal :show="scanModalShow" @click="scanModalClick" title="温馨提醒" :content="scanModalContent" :button="scanButton"></tui-modal>
		</template>

		<!-- 顾客 -->
		<template v-if="isMember==='gk'">
			<view class="gk-wrap">
				<view class="gk-top">
					<view class="gk-head">
						<view class="head-img">
							<image :src="headUrl" class="tui-avatar"></image>
						</view>
						<view class="head-right">
							<view class="text">{{memberCode}}</view>
							<text class="tag"><text>{{position1}}</text></text>
						</view>
					</view>
					<view class="gk-code">
						 <image :src="customerCodeImg"></image>
					</view>
				</view>
				<view class="gk-btn" @tap="navTo('/packageC/pages/storeOrder/storeOrder')">
					<image src="~@/packageC/static/img/order.png" mode=""></image>
				</view>
			</view>
			<tki-qrcode ref="qrcode"
			:val="customerUserId"
			:size=382
			:unit="'upx'"
			:onval="true"
			:loadMake="true"
			:usingComponents="true"
			 @result="qrR" 
			 :show="false"
			 :showLoading="true"
			/>	
			<!-- :icon="headUrl"
			:iconSize="50" -->
		</template>

		<view class="apply-modal" v-if="storeModalShow">
			<view class="apply-con">
				<view class="apply-con-close" @tap="closeStoreModal"><i class="iconfont iconguanbi3"></i></view>
				<view class="apply-con-title">请选择入口</view>
				<view class="store-modal-con">
					<view style="margin-bottom: 50rpx;">
						<tui-button :type="storeModalSel=='notjxs'?'danger':'black'" :plain="true" width="420rpx" height="80rpx" :size="32" shape="circle"  @tap="selectIdentity('notjxs')">管理层权限</tui-button>
					</view>
					<tui-button :type="storeModalSel=='jxs'?'danger':'black'"
					:plain="true" width="420rpx" height="80rpx" :size="32" shape="circle" @tap="selectIdentity('jxs')">体验权限</tui-button>
				</view>
				<view class="apply-con-btn">
					<tui-button type="danger" width="420rpx" height="80rpx" :size="32" shape="circle" @tap="storeModalClick">确认</tui-button>
				</view>
			</view>
		</view>
		
		<loading></loading>
		<!--共通错误-->
		<tui-modal></tui-modal>
	</view>
</template>
<script>
	// #ifdef MP-WEIXIN
	import cameraScan from "@/packageC/components/camera/camera.vue"
	// #endif
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import tuiButton from '@/components/button/button';
	export default {
		components: {
			// #ifdef MP-WEIXIN
			cameraScan,
			// #endif
			tkiQrcode,
			tuiButton,
		},
		data() {
			return {
				orgLv: uni.getStorageSync('orgLv'),
				position: uni.getStorageSync('orgLvAb'),
				position1:'',
				agencyId: uni.getStorageSync('agencyId'),
				scanFlag: false,
				scanTip: '',
				scanType: '', //扫码类型 
				customerInfo: {},
				modalContent: "",
				modalShow: false,
				couponCustomerObj: {}, //顾客体验券扫码返回信息
				headUrl: '/static/img/mine_def_touxiang_3x.png',
				customerUserId: '',
				isMember: null,
				customerCodeImg: '',
				iconsize: 40, // 二维码图标大小
				memberCode:'',
				storeButton:[],
				storeModalShow:false,
				curPos:'',//当前职位
				jxsUpperFlag:false,//经销商以上
				storeModalSel:'jxs',//入口选择
				memberType:2,//判断是否是dr会员,1代表dr会员
				scanModalShow:false,
				scanModalContent:'',
				scanButton:[{
						text: "关闭",
						type: "primary",
						plain: false //是否空心
					}]
			}
		},
		onLoad() {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			this.getShopUserInfo();
		},
		onShow() {
			// #ifdef APP-PLUS
			this.$eventHub.$off('appScanCode');
			this.$eventHub.$on('appScanCode',(codeRes) => {
				this.cashScanCode(codeRes)
			});
			// #endif
		},
		onUnload(){
			uni.removeStorageSync('orgLvNew');
		},
		methods: {
			testTip(){
				uni.showToast({
					icon: 'none',
					title: '页面正在开发中，敬请期待~',
					duration:1000,
				})
			},
			getCustomerInfo() { //获取用户信息
				let that = this;
				let params={
					type:1,
				}
				this.$http.customersIncipient(params).then((res) => {
					if (res.status === 0) {
						this.headUrl = res.data.customer.headimgurl;
						this.customerUserId = res.data.customer.customerUserId;
						this.memberCode = res.data.customer.memberCode;
						uni.setStorageSync('customerUserId',this.customerUserId)
						uni.setStorageSync('customerUserName',res.data.customer.customerUserName)
						if(this.isMember === 'gk'){
							setTimeout(() => {
								that.$refs.qrcode._makeCode()
							}, 100);
						}
						
					}
				})
			},
			qrR(path) {
				this.customerCodeImg = path;
			},
			getShopUserInfo() {
				this.$http.storeUserInfo({
					staffId: '',
				}).then((res) => {
					if (res.status === 0) {
						if(res.data){
							this.memberType=res.data.memberType
							uni.setStorageSync('memberType',res.data.memberType)
							if (uni.getStorageSync('orgLv') !== 'gk' && uni.getStorageSync('orgLv') !== 'hy'&&res.data.memberType!==1) { //不用true,false,防止界面闪现
								this.isMember = 'notgk'
								
								this.curPos=res.data.orgLv
								if(this.curPos=='jl'||this.curPos=='ls'||this.curPos=='fz'||this.curPos=='bbz'){
									this.storeModalShow=true;
									let pos='';
									let name='';
									if(this.curPos=='jl'){
										pos='经理'
										name=res.data.jlName
									}else if(this.curPos=='ls'){
										pos='理事'
										name=res.data.lsName
									}else if(this.curPos=='fz'){
										pos='副总'
										name=res.data.fzName
									}else if(this.curPos=='bbz'){
										pos='本部长'
										name=res.data.bbzName
									}
									uni.setStorageSync('storeOrgName',name)
									this.storeButton=[
										{
											text: pos,
											type: "primary",
											plain: false //是否空心
										}, {
											text: "经销商",
											type: "primary",
											plain: false
										}
									]
									
								}else{
									// ADD BY zhang
									uni.setStorageSync('storeOrgLv',this.curPos)
									this.position1=uni.getStorageSync('orgLvAb');
								}
							} else {
								this.isMember = 'gk'
								this.position1='顾客'
							}
							
							if (res.data.orgEsLv == 'sxjxs') {
								this.position='实习经销商'
								this.position1 = 'SX'
							} else if (res.data.orgEsLv == 'dxy') {
								this.position1 = 'DY'
							}
							if(this.memberType==1){
								this.position1='DR会员'
							}
						}else{
							this.isMember = 'gk'
							this.position1='顾客'
						}
						this.getCustomerInfo();
					}
				})
			},
			selectIdentity(tag){
				this.storeModalSel=tag;
			},
			storeModalClick() {//店铺首页身份选择弹框
				if (this.storeModalSel ==='notjxs') {
					uni.setStorageSync('storeOrgLv',this.curPos)
					this.position1=uni.getStorageSync('orgLvAb');
					this.jxsUpperFlag=true
				}else if (this.storeModalSel === 'jxs') {
					uni.setStorageSync('storeOrgLv','jxs')
					this.position1='经销商'
				}
				this.storeModalShow=false;
			},
			closeStoreModal(){
				uni.navigateBack()
			},
			jumpToHome(){
				uni.reLaunch({
					url:'/pages/home/home'
				})
			},
			jumpToChart(index){
				let stopFunctionArr = this.$store.state.dictDataAll['stopFunction'];
				let stopFunItem1 = null; //当前对象
				let stopFunItem2 = null; //message对象
				let stopFunItemArr = stopFunctionArr.filter((item) => {
					return (item.dictLabel == 'function3' || item.dictLabel == 'message')
				});
				if (stopFunItemArr[0].dictLabel == 'function3') {
					stopFunItem1 = stopFunItemArr[0];
					stopFunItem2 = stopFunItemArr[1];
				} else {
					stopFunItem2 = stopFunItemArr[0];
					stopFunItem1 = stopFunItemArr[1];
				}
				
				if (stopFunItem1.dictValue == '0') { //开启
					let orgLvGet=uni.getStorageSync("storeOrgLv")
					console.log("_________jumpToChart",this.orgLv);
					let urlList = ['/packageC/pages/statistics/saleReport','/packageC/pages/statistics/productReport','/packageC/pages/statistics/orderReport','/packageC/pages/statistics/customerReport','/packageC/pages/statistics/storeReport']
					if(index===3&&(this.orgLv!=='jxs'&&this.orgLv!=='dxy'&&orgLvGet!=='jxs')){
						uni.showToast({
							icon: 'none',
							title: '请到PC端查看',
							duration: 2000,
						})
						return false
					}
					// else if((index===0||index===4)&&(this.orgLv==='dxy')){
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '您没有该权限',
					// 		duration: 2000,
					// 	})
					// 	return false
					// }
					uni.navigateTo({
						url:urlList[index]
					})
				} else { //关闭
					let titleTips = stopFunItem2.dictValue
					uni.showToast({
						icon: 'none',
						title: titleTips,
						duration: 3000,
					})
				}
					
			},
			jumpTo(type){
				if(this.jxsUpperFlag){//经销商以上
					uni.showToast({
						title:'请以经销商身份登录',
						icon:'none',
					})
					return;
				}
				if(type=='stock'){
					uni.navigateTo({
						url:'/packageC/pages/stockManage/stockManage'
					})
				}else if(type=='order'){
					uni.navigateTo({
						url:'/packageC/pages/storeOrder/storeOrder'
					})
				}else if(type=='qrCode'){
					uni.navigateTo({
						url:'/packageC/pages/myCollectionQrCode/myCollectionQrCode'
					})
				}else if(type=='customer'){
					uni.navigateTo({
						url:'/packageC/pages/customerNotification/customerNotification'
					})
				}
			},
			scan(type) { //扫码
				if(this.jxsUpperFlag){//经销商以上
					uni.showToast({
						title:'请以经销商身份登录',
						icon:'none',
					})
					return;
				}
				if (type === 'coupon') { //顾客体验券
					this.scanTip = '请扫描顾客体验券';
					uni.showToast({
						icon: 'none',
						title: '请扫描顾客体验券',
						duration: 1500,
					})
					this.scanType = 'coupon';
				} else if (type === 'cash') { //收银
					this.scanTip = '请扫描顾客二维码';
					uni.showToast({
						icon: 'none',
						title: '请扫描顾客二维码',
						duration: 1500,
					})
					this.scanType = 'cash';
				}
				
				// #ifdef MP-WEIXIN
				this.scanFlag = true;
				// #endif
				// #ifdef APP-PLUS
				uni.navigateTo({
					url:'/packageC/pages/scan/scan'
				})
				// #endif
				
				// #ifdef H5
				setTimeout(() => {
					this.$wechat.scanQRCode((str) => {
						 //str为扫码结果
						 this.cashScanCode(str)
					});
				}, 2000);
				// #endif
				
			},
			
			cashScanCode(codeRes) { //扫码结果
				let that = this;
			
				if (this.scanType === 'coupon') {
					if((codeRes.indexOf("{")>-1)&&(codeRes.indexOf("}")>-1)){
						let res= JSON.parse(codeRes);
						this.couponCustomerObj=res
						let ccId = res.ccId;
						let version=res.version;
						if (!ccId) {
							uni.showToast({
								icon: 'none',
								title: '请扫描顾客体验券',
								duration: 1500,
							})
							// #ifdef H5
							setTimeout(() => {
								that.$wechat.scanQRCode((str) => {
								 that.cashScanCode(str)
								});
							}, 1000);
							// #endif
							return;
						}
						// #ifdef H5
						this.$wechat.getLocation((resLocation)=>{
						     that.distanceJudge(resLocation,res,ccId,version);
						 })
						// #endif
						// #ifdef APP-PLUS || MP-WEIXIN
						uni.getLocation({
							type: 'gcj02', //返回可以用于uni.openLocation的经纬度
							success(resLocation) {
								that.distanceJudge(resLocation,res,ccId,version);
							},fail(err){
								uni.showToast({title:"请检查位置信息状态",icon:"none", mask:true,duration:2000})
							}
						});
						// #endif
					}else{
						that.scanTip = '请扫描正确的顾客体验券';
						uni.showToast({
							icon: 'none',
							title: '请扫描正确的顾客体验券',
							duration: 1500,
						})
						// #ifdef H5
						setTimeout(() => {
							that.$wechat.scanQRCode((str) => {
							 that.cashScanCode(str)
							});
						}, 1000);
						// #endif
					}
				} else if (this.scanType === 'cash') {
					if (!(/^(\d{19})$/.test(codeRes))) { //扫的不是顾客的情况,不是19位数字
						that.scanTip = '请扫描正确的顾客二维码';
						uni.showToast({
							icon: 'none',
							title: '请扫描正确的顾客二维码',
							duration: 1500,
						})
						// #ifdef H5
						setTimeout(() => {
							that.$wechat.scanQRCode((str) => {
							 that.cashScanCode(str)
							});
						}, 1000);
						// #endif
						return;
					}
					
					this.customerUserId = codeRes;
					this.$http.customerInfo(this.customerUserId).then((res) => {
						if (res.status === 0) {
							if(res.data){
								that.customerInfo = res.data;
								console.log(that.customerInfo.memberCode)
								uni.setStorageSync('memberCode',that.customerInfo.memberCode)
								if(res.data.memberType&&res.data.memberType=="1"||res.data.userType=="0"){//顾客或者dr会员
									uni.showToast({
										icon: 'none',
										title: '顾客二维码扫描成功,请扫描商品二维码',
										duration: 2000,
									})
									that.scanTip = '请扫描商品二维码';
									
									that.scanType = 'goods';
									// #ifdef H5
									setTimeout(() => {
										that.$wechat.scanQRCode((str) => {
										 that.scanGoods(str)
										});
									}, 1000);
									// #endif
								}else{
									//非顾客
									uni.showToast({
										icon: 'none',
										title: '无效顾客二维码',
										duration: 2000,
									})
									that.scanTip = '请扫描顾客二维码';
									// #ifdef H5
									setTimeout(() => {
										that.$wechat.scanQRCode((str) => {
										that.cashScanCode(str)
										});
									}, 1000);
									// #endif
								}
							}else{
								//非顾客
								uni.showToast({
									icon: 'none',
									title: '无效顾客二维码',
									duration: 2000,
								})
								that.scanTip = '请扫描顾客二维码';
								// #ifdef H5
								setTimeout(() => {
									that.$wechat.scanQRCode((str) => {
									that.cashScanCode(str)
									});
								}, 1000);
								// #endif
							}
							
						}else{
							that.scanTip = '请扫描描顾客二维码';
							that.scanModalShow=true;
							that.scanModalContent="顾客二维码扫描失败";
							this.scanFlag = false;
							// #ifdef APP-PLUS
							this.$eventHub.$emit('appScanClose');
							// #endif
						}
					}).catch(()=>{
						this.scanFlag = false;
						// #ifdef APP-PLUS
						this.$eventHub.$emit('appScanClose');
						// #endif
					})
				} else if (this.scanType === 'goods') {
					this.scanGoods(codeRes);
				}
			},
			distanceJudge(resLocation,res,ccId,version){//距离判断
				let that=this;
				var s = that.$util.pointInsideCircle(resLocation.latitude,resLocation.longitude,res.latitude,res.longitude);
				console.log(resLocation.latitude)
				console.log(resLocation.longitude)
				console.log(res.latitude)
				console.log(res.longitude)
				console.log(s)
				console.log(99999999999999999)
				if(s>1000){//距离太远
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '您的顾客距离店铺位置较远！（距离>100米）请告知顾客前往店铺进行核销',
					// 	duration: 3000,
					// })
					that.scanModalShow=true;
					that.scanModalContent="您的顾客距离店铺位置较远！（距离>100米）请告知顾客前往店铺进行核销";
					that.scanFlag = false;
					// #ifdef APP-PLUS
					that.$eventHub.$emit('appScanClose');
					// #endif
					return;
				}else{
					let params = {
						ccId: ccId,
						version: version,
					}
					that.$http.scanCouponCustomer(params).then((res) => {
						if (res.status === 0) {
							// that.couponCustomerObj = Object.assign({}, res.data);
							that.modalContent = '确定核销该体验券吗？';
							that.modalShow = true;
						}else{
							that.modalShow = false;
						}
						that.scanFlag = false;
						// #ifdef APP-PLUS
						that.$eventHub.$emit('appScanClose');
						// #endif
					}).catch(()=>{
						that.scanFlag = false;
						// #ifdef APP-PLUS
						that.$eventHub.$emit('appScanClose');
						// #endif
					})
				}
			},
			scanGoods(codeRes){
				let that=this;
				that.scanTip = '请扫描商品二维码';
				uni.showToast({
					icon: 'none',
					title: '请扫描商品二维码',
					duration: 1500,
				})
				if(typeof codeRes==='string'&& codeRes.indexOf("=")>-1){
					let goodsUniqueCode = codeRes.split("=")[1].trim(); //商品唯一码
					if (goodsUniqueCode.length!==29) {
						that.scanTip = '请扫描正确的商品二维码';
						uni.showToast({
							icon: 'none',
							title: '请扫描正确的商品二维码',
							duration: 2000,
						})
						// #ifdef H5
						setTimeout(() => {
							that.$wechat.scanQRCode((str) => {
							 that.scanGoods(str)
							});
						}, 1000);
						// #endif
						return;
					}
					this.scanFlag = false;
					// #ifdef APP-PLUS
					this.$eventHub.$emit('appScanClose');
					// #endif
					uni.navigateTo({
						url: `/packageC/pages/storeCart/storeCart?goodsUniqueCode=${goodsUniqueCode}&customerUserId=${that.customerUserId}`
					})
				}else{
					that.scanTip = '请扫描正确的商品二维码';
					uni.showToast({
						icon: 'none',
						title: '请扫描正确的商品二维码',
						duration: 1500,
					})
					// #ifdef H5
					setTimeout(() => {
						that.$wechat.scanQRCode((str) => {
						 that.scanGoods(str)
						});
					}, 1000);
					// #endif
				}
			},
			closeCashScan() {
				this.scanFlag = false
			},
			modalClick(e) {
				const that = this;
				let index = e.index;
				if (index == 0) {
					// 取消
					this.modalCancel();
				} else if (index == 1) {
					//确定
					if (this.scanType === 'coupon') {
						// this.couponCustomerObj={"ccId":"f6b2781a8490dd7222aca78fb5320d1c", "version":1 } ;

						let params = {
							ccId: this.couponCustomerObj.ccId
						}
						//核销体验券
						this.$http.createEsCouponOrder(params).then((res) => {
							if (res.status == 0) {
								//查询优惠券信息
								// that.$http.queryCouponDetail(that.couponCustomerObj.ccId).then((result) => {
								// 	if (result.status == 0) {
								// 		//更新优惠券使用状态
								// 		const params = {
								// 			ccId: result.data.ccId,
								// 			version: result.data.version,
								// 			status: result.data.status,
								// 		};
								// 		console.log(params)
								// 		that.$http.updateCouponCustomer(params).then((info) => {
								// 			if (info.status == 0) {
								// 				that.couponCustomerObj = {};
								// 				uni.navigateTo({
								// 					url: '/packageC/pages/writeOffResult/writeOffResult'
								// 				})
								// 				that.modalCancel();
								// 			}
								// 		})
								// 	}
								// })
								that.couponCustomerObj = {};
								uni.navigateTo({
									url: '/packageC/pages/writeOffResult/writeOffResult'
								})
								that.modalCancel();
							}
						})
					}

				}

			},
			modalCancel() {
				this.modalShow = false;
			},

			goCart() {
				uni.navigateTo({
					url: '/packageC/pages/storeCart/storeCart'
				})
			},
			qrR(path) {
				this.customerCodeImg = path;
			},
			scanModalClick(){
				this.scanModalShow = false;
			}
		},
	}
</script>

<style lang="scss">
	.shop-wrap {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		color: #111111;
		position: relative;
		overflow-y: auto;

		.shop-head {
			width: 100%;
			height: 280rpx;
			padding: 60rpx 40rpx 90rpx;
			background: linear-gradient(119deg, #E4E6EE 0%, #F2F3F7 100%);
			display: flex;
			align-items: center;

			.head-img {
				width: 132rpx;
				height: 132rpx;
				box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
				border-radius: 66rpx;
				margin-right: 32rpx;
				image {
					width: 100%;
					height: 100%;
				}

				position: relative;

				.crown {
					width: 100rpx;
					height: 60rpx;
					position: absolute;
					top: -44rpx;
					left: 50%;
					margin-left: -50rpx;
					z-index: 10;
				}
			}

			.head-right {
				flex: 1;
				position: relative;

				.text {
					font-size: 32rpx;
					font-weight:bold;
					margin-bottom: 16rpx;
				}

				.head-icons {
					position: absolute;
					right: 0rpx;
					top: -30rpx;
					width: 104rpx;
					display: flex;
					justify-content: space-between;

					.icon1 {
						width: 40rpx;
						height: 40rpx;
					}

					.scan-icon {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}


		.shop-entrance {
			position: absolute;
			left: 0;
			top: 220rpx;
			width: 100%;
			padding: 4rpx 32rpx;

			.shop-entrance-inner {
				width: 100%;
				height: 162rpx;
				background: #FFFFFF;
				box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
				border-radius: 16rpx;
				padding: 30rpx 10rpx;
				display: flex;
				justify-content: space-between;

				.entrance-item {
					width: 20%;
					text-align: center;

					image {
						width: 60rpx;
						height: 60rpx;
						margin: 0 auto 10rpx;
					}

					text {
						margin-top: 12rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-weight: 400;
					}
				}
			}

		}

		.shop-chart {
			width: 100%;
			height: calc(100vh - 270rpx);
			background-color: #F7F7F7;

			padding: 124rpx 32rpx 30rpx;

			.chart-title {
				font-size: 36rpx;
				font-weight: 500;
				line-height: 50rpx;
			}

			.chart-con {
				width: 100%;

				.chart-item {
					margin-top: 24rpx;
					padding: 0 32rpx;
					width: 100%;
					height: 124rpx;
					border-radius: 16rpx;
					background-color: #fff;
					display: flex;
					align-items: center;

					&:first-child {
						margin-top: 18rpx;
					}

					.chart-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 32rpx;
					}

					.chart-text {
						flex: 1;

						.text-title {
							font-size: 32rpx;
						}

						.text-sub {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.iconfont {
						color: #aaa;

					}
				}
			}


		}
		
		
	}

	.apply-modal{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
		transition:0.3s ease-in-out;
		.apply-con{
			width: 580rpx;
			height: 670rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 18rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 14rpx;
			position: relative;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			// align-items: center;
			padding:16rpx 32rpx 30rpx;
			.apply-con-close{
				position: absolute;
				top:24rpx;
				right: 24rpx;
				color: #DEDEDE;
			}
			.apply-con-title{
				width: 100%;
				text-align: center;
				line-height: 60rpx;
				font-weight: bold;
				font-size: 32rpx;
			}
			.apply-con-img{
				width:260rpx;
				height: 260rpx;
				margin:30rpx auto;
				image{
					width:260rpx;
					height: 260rpx;
					margin-top:16rpx;
				}
			}
			.apply-con-explain{
				font-size: 24rpx;
				line-height:36rpx;
			}
			.apply-con-btn{
				margin:50rpx auto 0;
				width:420rpx;
			}
			
			.store-modal-con{
				width: 420rpx;
				height: 340rpx;
				margin: 70rpx auto 0;

				.title{
					text-align: right;
					padding-right: 30rpx;
					line-height: 50rpx;

				}
				.mb{
					margin-bottom: 30rpx;
				}
			}
			
		}
	}
	
	.shop-btn {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		position: fixed;
		right: 32rpx;
		bottom: calc(constant(safe-area-inset-bottom) + 84rpx);
		bottom: calc(env(safe-area-inset-bottom) + 84rpx);

		background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
		box-shadow: 0px 4rpx 40rpx 0px rgba(83, 0, 0, 0.24);
		display: flex;
		align-items: center;
		justify-content: center;

		.iconfont {
			color: #fff;
			font-size: 48rpx;
			opacity: 0.8;
		}
	}

	.gk-wrap {
		width: 100%;
		padding: 80rpx 32rpx;
		height: 100vh;

		.gk-top {
			width: 100%;
			height: 820rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;

			.gk-head {
				width: 100%;
				padding: 64rpx 24rpx;
				display: flex;
				align-items: center;

				.head-img {
					width: 140rpx;
					height: 140rpx;
					margin-right: 16rpx;
					border-radius: 70rpx;
					box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
					image {
						width: 100%;
						height: 100%;
					}
				}

				.head-right {
					flex: 1;

					.text {
						font-size: 32rpx;
						font-weight: 500;
						margin-bottom: 16rpx;
					}
				}
			}

			.gk-code {
				width: 496rpx;
				height: 496rpx;
				margin: 0 auto 64rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.gk-btn {
			width: 170rpx;
			height: 170rpx;
			position: fixed;
			left: 50%;
			bottom: 60rpx;
			margin-left: -90rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.tag {
		min-width: 100rpx;
		height: 44rpx;
		line-height: 44rpx;
		display: inline-block;
		padding:0 16rpx;
		background: #EA655E;
		border-radius: 22rpx;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		text{
			opacity: 0.8;
		}
	}
	
	
	
	
</style>
